iT邦幫忙

2021 iThome 鐵人賽

DAY 22
0
Modern Web

網頁前端基礎&Vue.js系列 第 22

javascript表單資料處理&驗證(DAY22)

  • 分享至 

  • xImage
  •  

這篇文章會介紹如何使用DOM來處理表單的物件存取,以及利用條件判斷式來處理表單的驗證,像是在上一篇的部分有舉了一個例子,裡面使用到了if-else的條件判斷式來判斷使用者有沒有正確輸入開發者所設定的範圍值,不可超出此範圍,否則會變為無效值之類的,而這篇要來介紹用判斷式來設定必填欄位的方法和判斷使用者輸入的值是否為數值的屬性!

  • DOM表單存取

Html表單元素:<form name="messagebox">

  1. document.forms["messagebox"];
    messagebox為上面html表單form的name屬性,也可以使用id屬性。
  2. document.forms["messagebox"].elements["0"].value;
    取得messagebox表單中第一個元素的值。
  3. document.forms["messagebox"].elements["area1"].value;
    document.forms["messagebox"].elements.area1.value;
    取得messagebox表單中id或name為area1的值。
  • 輸入框的必填欄位&資料型別驗證

  1. 必填欄位
if(必填欄位名稱.value == " "){
alert("此為必填欄位!");}
  1. 將資料用整數傳回
    parseInt()
    Ex: parseInt("6.666");
    答:6
  2. 將資料用浮點數傳回
    parsefloat()
    Ex: parseFloat("6.666");
    答:6.666
  3. 判定使用者輸入的資料是否為NaN(not a number不是數值)
    屬性:isNaN()
    補充:若不是數值則傳回true,否則會false

Example:

  • 若使用者沒有輸入東西,為空值,則跳出提示窗且不會新增留言
    https://ithelp.ithome.com.tw/upload/images/20211003/20140225YHeD0e135u.png
  • 若使用者不是輸入數值,則跳出提示窗且不會新增留言
    https://ithelp.ithome.com.tw/upload/images/20211003/20140225OHEC1CjiHk.png
  • 若使用者輸入浮點數,則會轉換成整數輸入
    https://ithelp.ithome.com.tw/upload/images/20211003/20140225PFdhBF2lkZ.png
<head>
    <script>
        function add() {
            var message = parseInt(document.forms["messagebox"].elements["area1"].value);
            //存取id為area1的表單元素值,且轉換成整數型別
            if (message == "" || isNaN(message)){
                alert("為必填欄位並輸入數值")
                return;
            }
            //若輸入框為空值或輸入的不是數值,則結束函式,不執行下面的指令!
            var textnode = document.createTextNode("user:" + message);
            var br = document.createElement("br");
            var area = document.getElementById("area2")
            area.appendChild(textnode);
            area.appendChild(br);
            document.getElementById("count").innerText = area.children.length;
        }
    </script>
</head>
<body>
    <form id="messagebox">
        <h1>留言版</h1><hr />
        <textarea id="area1" name="area" rows="8" cols="30" placeholder="在此留言(只能輸入數值喔)!"></textarea><br />
        <input type="button" value="新增留言" onclick="add()" /><br />
        <p>現在有<span id="count">0</span>則留言</p>
        <div id="area2">
        </div>
    </form>
</body>

結語

這篇文章介紹了如何用DOM存取表單物件以及如何用條件判斷式來判斷是否為空值和isNaN屬性判斷是否為數值,也舉了一個例子讓大家更加了解如何使用這篇所學的東西。下一篇將會介紹用DOM來動態調整元素的屬性、樣式等,也會介紹javascript計時器setInterval()函式喔!


上一篇
javascript(addEventListener事件處理函式)(DAY21)
下一篇
javascript(DOM調整屬性與樣式&計時器)(DAY23)
系列文
網頁前端基礎&Vue.js30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言